<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuex/dist/vuex.js"></script>
    <style>
        #app {
            width: 296px;
            height: 471px;
            margin: auto;
            background: #e9e9e9;
        }
        .result {
            height: 100px;
            text-align: right;
            font-size: 48px;
            font-weight: bolder;
            margin-right: 15px;
            line-height: 160px;
            overflow: hidden;
        }

        .enter {
            text-align: right;
            font-size: 32px;
            margin-right: 15px;
        }

        .keys .list div {
            background: #ffffff;
            display: block;
            padding-top: 20px;
            font-size: 26px;
            width: 72px;
            height: 60px;
            float: left;
            text-align: center;
            border: solid #e9e9e9 1px;
            cursor: pointer;
        }
        .keys .list div:hover {
            background: #e9e9e9;
        }

        .keys .list div:first-child {
            color: #ff6111;
        }

        .keys .list div:last-child {
            color: #ffffff;
            background: #ff6111;
        }
        .keys .list div:last-child:hover {
            color: #ffffff;
            background: #ff3c0a;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="result">{{result}}</div>
    <div class="enter">{{enter===''?0:enter}}</div>
    <div class="keys">
        <div class="list">
            <!--键盘区域-->
            <keyboard v-for="item in keys" :value="item"></keyboard>
        </div>
    </div>
</div>
<script>
    const store = new Vuex.Store({
        state: {
            result: '',//运算结果
            enter: ''//输入的值
        },
        //定义名为calculate的mutation
        mutations: {
            calculate (state, value) {
                //enter = 7+8=
                //enter = 7+-8
                if(state.enter.endsWith('=') &&
                    (value !=='clear' && value !== '+' &&value !== '-' && value !== '*' && value !== '/')){
                    return
                }else if(state.enter.endsWith('=') &&
                    (value === '+' || value === '-' || value === '*' || value === '/')) {
                    state.enter = state.result
                }
                if (value === '=') {
                    //按键的值为=，进行结果计算
                    state.result = eval(state.enter)
                    state.enter += value
                } else if (value === 'clear') {
                    //按键的值为clear，清空数据
                    state.result = state.enter = ''
                } else {
                    //输入结果enter进行拼接
                    state.enter += value
                }
            }
        }
    })
    //定义keyboard
    Vue.component('keyboard', {
        //接受的参数value，代表键盘输入的值
        props: ['value'],
        //模板
        template: '<div  @click="getKeyboardValue" :data-value="value">{{value}}</div>',
        methods: {
            //点击事件处理函数
            getKeyboardValue (event) {
                //获取当前的按键的值
                let value = event.target.dataset.value
                //通过commit提交mutation
                this.$store.commit('calculate', value)
            }
        }
    })

    //创建vue实例
    const app = new Vue({
        el: '#app',
        store,
        //给store添加处理方法
        computed: {
            result () {
                //通过this.$store获取仓库的数据result
                return this.$store.state.result
            },
            enter () {
                return this.$store.state.enter
            }
        },
        data: {
            //16个按键的值
            keys: [
                'clear', '+', '-', '*',
                '7', '8', '9', '/',
                '4', '5', '6', '0',
                '1', '2', '3', '=',
            ]
        }
    })
</script>

</body>
</html>